<template>
  <div>
    <!-- <vue-chart :options="options" /> -->
  </div>
</template>
<script>
import 'echarts/extension/bmap/bmap'
import { cities, geoCoordMap } from '../mod/map'
import { conbinaMapData } from '../utils/index'
// index.html 引入 https://api.map.baidu.com/api?v=2.0&ak=CPxHyHH5XD8mUnmRPbv9BehycOEklp34
export default {
  name: 'Bmap',
  data() {
    return {
      options: {}
    }
  },
  mounted() {
    this.options = {
      title: {
        text: '外卖销售数据大盘',
        subtext: '销售趋势统计',
        sublink: 'https://fanyi.baidu.com/mtpe-individual/multimodal?query=buildCoordinate&lang=en2zh',
        left: 'center'
      },
      bmap: {
        // key: 'G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb', // 百度地图密钥
        key: 'CPxHyHH5XD8mUnmRPbv9BehycOEklp34', // 百度地图密钥
        center: [104.114129, 37.550339],
        zoom: 5,
        roam: false, // 缩放
        mapStyle: {
          styleJson: [
            {
              featureType: 'water',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'land',
              elementType: 'all',
              stylers: {
                color: '#f3f3f3'
              }
            },
            {
              featureType: 'railway',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'highway',
              elementType: 'all',
              stylers: {
                color: '#fdfdfd'
              }
            },
            {
              featureType: 'highway',
              elementType: 'labels',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'geometry',
              stylers: {
                color: '#fefefe'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'geometry.fill',
              stylers: {
                color: '#fefefe'
              }
            },
            {
              featureType: 'poi',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'green',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'subway',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'manmade',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'local',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'labels',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'boundary',
              elementType: 'all',
              stylers: {
                color: '#fefefe'
              }
            },
            {
              featureType: 'building',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'label',
              elementType: 'labels.text.fill',
              stylers: {
                color: '#999999'
              }
            }
          ]
        }
      },
      tooltip: {},
      series: [
        {
          name: '销售额', // tooltip 鼠标移入显示标题
          type: 'scatter', // 散点图
          // rect（默认的二维直角坐标系）、polar（极坐标系）、geo（地理坐标系
          coordinateSystem: 'bmap', // 数据在图表上是如何布局和展示
          data: conbinaMapData(cities, geoCoordMap),
          encode: {
            value: 2 // 对应数据第2列
          },
          itemStyle: {
            color: 'purple' // 点的颜色
          },
          symbolSize: function (val) {
            return val[2] / 10 // 点的大小
          },
          label: {
            show: false, // 显示的字隐藏
            position: 'right', // 位置
            // 显示文字
            formatter: function (v) {
              return `${v.data.name} - ${v.data.value[2]}`
            }
          },
          // 隐藏 label 用强调功能（鼠标移入显示一行字）
          emphasis: {
            label: {
              show: true
            }
          }
        },
        {
          name: 'Top 10',
          type: 'effectScatter', // 带波纹的散点图
          coordinateSystem: 'bmap', // 数据在图表上是如何布局和展示
          symbolSize: function (val) {
            return val[2] / 10 // 点的大小
          },
          data: conbinaMapData(
            cities.sort(function (a, b) {
              return b.value - a.value
            }),
            geoCoordMap
          ).slice(0, 10),
          encode: {
            value: 2 // 对应数据第2列
          },
          label: {
            show: true, // 页签
            position: 'right', // 位置
            formatter: '{b}' // 显示文字
          },
          hoverAnimation: true, // 移入动画
          rippleEffect: {
            brushType: 'stroke' // 波纹样式（空心波纹）
          },
          itemStyle: {
            color: 'purple', // 点的颜色
            shadowBlur: 10, // 阴影
            shadowColor: '#333' // 阴影颜色
          }
        }
      ]
    }
  }
}
</script>
